const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    entry: './src/main.js', // 入口文件
    output: { // 输出
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            minify: {
                collapseWhitespace: true, //折叠空白区域
                removeComments: true, //删除注释
                hash: true, //是否需要对src引的文件后面加上Hash，使用时需要区分开发环境和生产环境
                chunks: [], //允许添加一些额外的文件
                chunksSortMode: 'manual' //chunks的文件顺序注入
            }
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [{
            test: /\.css/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },{
            test: /\.vue$/,
            use: [
                'vue-loader'
            ]
        },{
            test: /\.scss$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        }]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'), // 服务器资源的根目录，不写的话，默认为bundle.js
        hot: true, //启用热加载
        host: 'localhost',
        port: 5000, //端口号
        compress: true, // 服务器资源采用gzip压缩
        open: true, // 服务器启动后打开默认浏览器
        historyApiFallback: true, // 解决history模式刷新404
    }
};